import React, { Component } from "react";
import axios from "axios";
import "./Register.scss";
import { NavBar, Icon, Toast,TabBar } from "antd-mobile";
let time;

export default class Register extends Component {
  constructor(props) {
    super(props);
    this.contentRef = React.createRef();
    this.state = {
      // TabBar部分状态
      selectedTab: "redTab",
      hidden: false,
      fullScreen: false,
      //导航栏右侧图标是否被点击
      isSelect: false,
      password: "",
      mobile: "",
      code: "",
      isSendCode: false,
      num: 60,
    };
  }
  // 显示tabbar
  tabbarBlockClick = () => {
    this.setState({
      isSelect: !this.state.isSelect,
    });
  };
  // 账号改变
  handleMobileChange = (e) => {
    this.setState({
      mobile: e.target.value,
    });
  };
  // 密码改变
  handlePasswordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  };
  // 验证码改变
  handleCodeChange = (e) => {
    this.setState({
      code: e.target.value,
    });
  };
  // 跳转登陆
  handleLogin = (params) => {
    this.props.history.push("/login/0");
  };
  // 获取验证码
  getCode = (e) => {
    if (!this.state.mobile) {
      Toast.info("亲，你手机号输入为空", 1);
    } else {
      if (e.target.innerHTML === "发送验证码") {
        axios
          .get("http://s.linweiqin.com/api/s/getMobileCode", {
            params: {
              mobile: this.state.mobile,
            },
          })
          .then((res) => {
            Toast.info(res.data.msg, 1);
            if (res.data.msg === "请输入正确的手机号码") {
            } else if (res.data.msg === "发送成功") {
              // 验证码倒计时
              this.setState({ isSendCode: true }, () => {
                time = setInterval(() => {
                  this.setState({
                    num: this.state.num - 1,
                  });
                }, 1000);
              });
            }
          })
          .catch((err) => Toast.info("发送失败", 1));
      } else {
        Toast.info("亲,请别重复发送", 10);
        return;
      }
    }
  };
  // 验证码倒计时
  componentDidUpdate() {
    if (this.state.num === 0) {
      clearInterval(time);
      this.setState({
        num: 60,
        isSendCode: false,
      });
    }
  }
  // 注册
  handleSubmit = (params) => {
    if (
      this.state.mobile === "" ||
      !this.state.password === "" ||
      !this.state.code === ""
    ) {
      Toast.info("亲输入框不能为空", 1);
      return;
    } else {
      axios
        .post("http://s.linweiqin.com/api/s/createUser", {
          mobile: this.state.mobile,
          username: this.state.mobile,
          password: this.state.password,
          code: this.state.code,
        })
        .then((res) => {
          console.log(res);
          if (res.data.msg === "新增成功") {
            Toast.info("恭喜注册成功", 1);
            this.props.history.push("/login/0");
          } else {
            Toast.info(res.data.msg, 1);
          }
        })
        .catch((err) => Toast.info("注册失败", 1));
    }
  };

  render() {
    return (
      <div className="yg-register">
        {/* 商品列表导航条开始 */}
        <NavBar
          mode="light"
          className="dd-cart-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
          rightContent={[
            <i
              className={
                this.state.isSelect === false
                  ? "iconfont icon-19"
                  : "iconfont icon-cha"
              }
              onClick={this.tabbarBlockClick}
              key={123}
            ></i>,
          ]}
        >
          当当注册
        </NavBar>
        {/* 商品列表导航条结束 */}
        {/* 商品列表tabbar开始 */}
        <div
          className={
            this.state.isSelect === false
              ? "dd-cart-tabbar"
              : "active dd-cart-tabbar"
          }
        >
          <TabBar
            // 未选中的字体颜色
            unselectedTintColor="#949494"
            // tintColor
            tintColor="#ff2d4a"
            // tabbar 背景色
            barTintColor="#eeeeee"
            hidden={this.state.hidden}
            tabBarPosition="top"
          >
            <TabBar.Item
              title="首页"
              key="index"
              // 默认展示图片
              icon={<i className="iconfont icon-main"></i>}
              // 选中后的展示图片
              selectedIcon={
                <i
                  className="iconfont icon-main"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/"}
              onPress={() => {
                this.props.history.push("/");
              }}
            >
              {this.props.location.pathname === "/" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="分类"
              key="category"
              icon={<i className="iconfont icon-fenleichazhao"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-fenleichazhao"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/category"}
              onPress={() => {
                this.props.history.push("/category");
              }}
            >
              {this.props.location.pathname === "/category" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="值得买"
              key="worthBuy"
              icon={<i className="iconfont icon-gouwudai"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwudai"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/worthBuy"}
              onPress={() => {
                this.props.history.push("/worthBuy");
              }}
            >
              {this.props.location.pathname === "/worthBuy" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="购物车"
              key="cart"
              icon={<i className="iconfont icon-gouwuche1"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwuche1"
                  style={{ color: "#ff2d4a", fontSize: "20px" }}
                ></i>
              }
              selected={this.props.location.pathname === "/cart"}
              onPress={() => {
                this.props.history.push("/cart");
              }}
            >
              {this.props.location.pathname === "/cart" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="我的当当"
              key="my"
              icon={<i className="iconfont icon-wode"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-wode"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/my"}
              onPress={() => {
                this.props.history.push("/my");
              }}
            >
              {this.props.location.pathname === "/my" && this.props.children}
            </TabBar.Item>
          </TabBar>
          {/* <Tabbar className="cart-tabbar-content"></Tabbar> */}
        </div>
        {/* 商品列表tabbar开始 */}
        <h4>注册新用户</h4>
        <form action="">
          <div className="biaodan">
            <section>
              <i className="iconfont icon-shouji"></i>
              <input
                type="text"
                name=""
                id="mobile"
                value={this.state.mobile}
                onChange={this.handleMobileChange}
                placeholder="请输入手机"
              />
            </section>
          </div>
          <div className="biaodan">
            <section>
              <i className="iconfont icon-mima"></i>
              <input
                className="fasoyanzm1"
                type="text"
                value={this.state.code}
                onChange={this.handleCodeChange}
                placeholder="请输入验证码"
              />
            </section>
            <button
              className={this.state.isSendCode ? 'fasoyanzm3' : "fasoyanzm2"}
              onClick={this.getCode}
            >
              {this.state.isSendCode ? this.state.num + "秒" : "发送验证码"}
            </button>
          </div>
          <div className="biaodan">
            <section>
              <i className="iconfont icon-gouwudai"></i>
              <input
                value={this.state.password}
                onChange={this.handlePasswordChange}
                type="password"
                name=""
                id="password"
                placeholder="请输入密码"
                autoComplete="true"
              />
            </section>
          </div>
        </form>
        <div className="zhuce">
          <button className="reg-zhuce" onClick={this.handleSubmit}>
            注册
          </button>
        </div>
        <div className="login">
          <button className="reg-login" onClick={this.handleLogin}>
            立即登录
          </button>
        </div>
      </div>
    );
  }
}
